Text renders blurred in Safari when Fullscreen API is embedded to Head HTML (reproduce steps included)

Using JavaScript with Hype
1

ISSUE
Text renders blurred only in Safari, while in other browsers are okay.

STEPS TO REPRODUCE ISSUE

  1. Download attached template file that contains Fullscreen API.
  2. Try test with Safari, Chrome, and Firefox.
  3. Add a .mp4 video to the scene.
  4. Try test with Safari, Chrome, and Firefox, again.
  5. Compare the results between step 2, and 4.

RESULT
When there is no video on the scene, all 3 browsers render text correctly.
If there’s a video, however, Safari renders text blurred(low resolution) while other 2 browsers are okay.

NOTE
Screenshots and template files are attached.
I thinks there’s something wrong with the Heat HTML but cannot figure it out.

textrender.png644×1140 304 KB

Original Image Link https://www.dropbox.com/s/s0scsh3mxn2j2gg/textrender.png?dl=1

Fullscreen God.hypetemplate.zip (23.0 KB)

2

Safari has specific rendering modes where it will either try to draw the text/shapes at a larger size, or it will draw at the smaller size and scale everything as an image. It looks like the existence of a video is triggering a path that makes it do the image scaling.

One workaround would be instead of using the scaling script in your head HTML, to use Hype’s flexible layout system. It appears that if the video is in a different group than the scaled content, it will not trigger the blurry rendering mode for the other group.

1 Like