Bug 189510 – Some images are not shown on the screen when they should be

• Status: NEW
• Component: Images

[Seth Poulsen]

Created attachment 349415 [details]
Minimal Example to Reproduce Bug

Code path that leads to the problem
1. Put the image in an iFrame, with the iFrame positioned so that the image is off screen
2. ensure the iFrame has the CSS property "writing-mode: vertical-rl;"
3. Programmatically move the iFrame so that the image is on screen.

Steps to Reproduce: 
To see bug in the attached minimal example:
1. run `python -m SimpleHTTPServer` in the directory of index.html
2. point Safari to http://localhost:8000/
3. Click on "next page" a few times to observe images sometimes missing (web inspector will show that they are there, but you can't actually see them)
4. to see the problem again, use Cmd + option + R to invalidate caches and reload

Reproducible on newer version of Safari (11.1.2, maybe others also) and the WebView on iOS 11+

Attempted workarounds: 
-putting a border on the image
-adding style "transform: translateZ(0)" (works, but makes the images blurred by
  about a pixel, even when used together with "filter: blur(0)")
-clearing then resetting src attribute of image when the image is to be shown
-changing the opacity of the image to 0, then transitioning it back to 1 when the
  image is shown
-toggling the visibility attribute
-toggling the display style
-constructing an entirely new Image node and replacing the original one in the tree

[Radar WebKit Bug Importer]

<rdar://problem/44349725>