Might be gone in Canary, but it's an issue in the current Chrome and it destroys my Grid demo. Perhaps a fix could be pushed to Chrome Stable users?

Thanks for your report.

I can't reproduce this on 65.0.3325.181 on 10.13.4 beta. Can you try 65.0.3325.181 (current stable)? If it still shows up there, I'll see if I can find a 10.13.3 machine.

Thanks for investigating!

It's difficult to reproduce.

Using the latest stable Chrome, I open https://tobireif.com/demos/grid/ in a new tab, then drag the right edge of the window to the left until the text "The Sane Choice!" gets broken into two lines. The I continue dragging, very slowly, and sometimes (seldomly) I see a flash of differently rendered text.

Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Just to be clear: does that happen with .181 also? the version you gave before is the previous stable release.

Yep, using Version 65.0.3325.181 (Official Build) (64-bit) I saw the flash. But I can't reproduce it anymore, and I can't anymore reproduce incorrect rendering that stays around for a screenshot.

Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Just managed to reproduce it.

Using the latest stable Chrome, open https://tobireif.com/demos/grid/ in a new tab (perhaps reload?), then slowly(?) drag the right edge of the window to the left until the text "The Sane Choice!" gets broken into two lines. The continue dragging very(!) slowly, and sometimes there is incorrectly rendered text.

See the new screenshot:

Deleted: screenshot.png 576 KB

	screenshot.png 576 KB View Download

This is quite a severe rendering bug, it destroys my demo. So thanks again for investigating!

Trying in Canary now.

I still can't repro. :(

I'll kick this over to the Blink CSS team for triage, but there is no chance at all that we will do a new stable release to fix this issue. For context, "quite severe rendering bug" in Chrome (to the extent that we would do a new stable release this late in the cycle) means "a popular website completely fails to draw" or "one of the alexa top 100 displays a significant rendering problem with no workaround". Sorry about your demo :\

(Oh, it might occur more often after a browser restart.)

So I can only hope my demo will reach the Alexa top 100 😀

I hope that the issue can get fixed soon, and that the fix will get pushed to users as soon as possible & sensible.

By the way, it is indeed "a significant rendering problem with no workaround".

A minor observation: In both screenshots, only the first line (the text "The sane") is garbled - not the second line (the text "choice!").

Using my instructions I can reproduce the flash of probably garbled text pretty often (and sometimes the deuinitely garbled text sticks around), but I can't reproduce the issue in Canary, at all. That seems to be provide reasonable cause for cautious optimism 😀

"deuinitely" → "definitely"

There appear to be tiling artifacts in the screenshot. I suspect this is partial raster related.

In DevTools, please open More Tools > Rendering and select Layer Borders and get another screenshot of the bug with that debug information displayed.

Trying ...

By the way, it seems to easier to reproduce the issue after an OS restart.

Success 😀 I'm happy to present screenshot_garbled_text_plus_layer_borders.png :

Deleted: screenshot_garbled_text_plus_layer_borders.png 491 KB

	screenshot_garbled_text_plus_layer_borders.png 491 KB View Download

Some info:
Chrome Version 65.0.3325.181 (Official Build) (64-bit)
MacOS 10.13.3 (17D102)
Intel Iris Pro 1536 MB

Thanks a bunch. I can route this properly now.

We are not correctly rastering some tile.

Thanks for investigating!

Hmm, can't repro this on Linux with or without gpu rasterization.

Does this repro differently with gpu rasterization turned on and off? My intuition is that this seems more likely to be a Skia/Ganesh bug than something in cc.

One data point: from chrome://gpu/ :

"On Intel GPUs MSAA performance is not acceptable for GPU rasterization: 527565[link:  http://crbug.com/527565  ]
Applied Workarounds: msaa_is_slow"

By the way, as I wrote earlier, I can't reproduce the issue in Canary, at all. Perhaps it's fixed?

I started Chrome with --force-gpu-rasterization , tried to reproduce the issue, and saw the flash of incorrectly-rendered text.

I started Chrome with --disable-gpu-rasterization , and could not reproduce the issue.

I think I want GPU rasterization (for perf eg of animations) and non-garbled text 😀

Bad news - I noticed (while doing general testing) that there's flashing text in Canary as well:

In Canary, open https://tobireif.com/demos/grid/ , don't click on anything, drag the right edge of the window to left (slowly), while observing "CSS Grid" - there's a flash of uncorrectly-rendered text.

P.S. It happens after the text "CSS Grid" becomes smaller.

This sounds like a Ganesh (or driver issue).  CCing Skia folks to triage and investigate.

Reproduced in Canary, and managed to stop resizing while the garbled text was visible (often there's a just a flash of incorrectly rendered text and then the text is rendered normally again).

Repeated this several times:

Restart MacOS, open latest Canary, in a new tab open https://tobireif.com/demos/grid/ , don't click on anything, drag the right edge of the window to left. First medium slow, then after the text-size of "CSS Grid" jumped to smaller go extremely slow and one micro-step at a time. Always observe "CSS Grid", stop as soon as there is incorrectly-rendered text. Result:

(In the screenshot see the text "CSS Grid".)

Deleted: screenshot.png 525 KB

	screenshot.png 525 KB View Download

P.S.

Note that (in the latest screenshot) inside the text "CSS GRID", in the garbled area, there's a fragment of the text "WHY USE IT?". The letters "WHY US" are discernible. The real instance of "WHY USE IT?" is the pink "WHY USE IT?" to the right of "CSS GRID".

I hope that you can reproduce the issue shown in the screenshots using the instructions in comment 32.

Greg is the current Skia GPU wrangler.

I've tried restarting my mac multiple times and the going to the test page. I still have yet to be able to repro the bug using the steps described in #32.

I am running on Macbook Pro 10.13.3, with Intel HD Graphics 630.

Has anyone been able to repro this bug yet?

And testing on canary, 67.0.3386.0

Thanks for trying to reproduce the issue!

It's difficult to reproduce. Perhaps you could try #32 again, and when it says "go extremely slow" try to move the edge of the window by just ~ 1px at a time (and try the whole set of steps eg 5 times). I know it's annoying that the bug is so difficult (and time-consuming) to reproduce ... but it does occur sometimes.

As the screenshots show, when it does occur it's quite a severe issue because it makes the text completely garbled == unreadable in some cases. So a fix would be great 😀

Perhaps it's related to the graphics card / the driver? Do you have access to a MacBook with an Intel Iris Pro?

If at any time you want me to test eg a fix, please let me know and I'll check it here ASAP.

I'm now on MacOS 10.13.4 . It seems that this update brought "Updated Intel, NVIDIA, and AMD graphics drivers". Also:

https://support.apple.com/kb/DL1959?locale=en_US
"Fixes graphics corruption issues affecting certain apps on iMac Pro"

Testing again.

(I'm using a MacBook Pro not an iMac Pro, but it's worth a try.)

The issue occurred on the second or third try:

(see the text "CSS Grid")

Deleted: screenshot_macos_10_13_4_canary.png 323 KB

	screenshot_macos_10_13_4_canary.png 323 KB View Download

It doesn't seem to happen in Safari.

It doesn't seem to happen in Firefox.

Still can't get it to repro on my machine. I've tried restarting machine and running it 6 times with no luck.

Is anyone else able to repro the bug? Tobi are you able to do any sort of manual bisect to narrow down when the issue started happening?

I can try to duplicate it on one of our laptops at home tonight -- one of them might have an Iris Pro.  Is this on a Retina display?

Just so I understand what I'm seeing when I try the site: it looks like as you shrink the window it will shrink the text to fit, then will pop to a new layout after a certain point. Is that correct?

@Greg:

Thanks for trying again! Let's wait and see whether Jim can reproduce the issue - perhaps he can then do the bisect.

@Jim:

Thanks for trying to reproduce this!

Yep, it's a Retina display (MacBook Pro).

Each time before you test restart MacOS, then in the latest Canary in a new tab open https://tobireif.com/demos/grid/ (don't click on anything) (probably best to not have the dev tools open). As you drag the right edge of the window to the left (medium slow), the text "CSS Grid" shrinks and then at one point it jumps to a smaller size (at 865px window width / when the blue text "tobi​reif​.com" jumps to the bottom of the page). Always lool at the text "CSS Grid". Right after that text-size-jump go extremely slow, eg ~ 1px at a time. Always observe the text "CSS Grid", stop as soon as there is incorrectly-rendered text. Directly (without clicking on the page or resizing the window or opening dev tools etc) take a screenshot. If this whole procedure didn't yield any garbled text - try again ... Stop doing the steps as soon as you got incorrectly-rendered text, or eg after 5-6 times. Sorry it's such an ordeal just for being able to see the live issue.

'Always lool at the text "CSS Grid"'
->
'Always look at the text "CSS Grid"'
😀

I hope that someone can reproduce the issue, either using comment #32 or using the last paragraph comment #47, and I hope that it can get fixed ...

I tried duplicating it this morning on my MacBook Pro -- which does have the Intel Iris Pro -- and wasn't able to. I started from a fresh reboot and tried it on both the latest Chrome and the Canary.

From what you describe it looks like the text atlas is getting corrupted for a frame for a given tile, but I haven't any sense why.

Do you know when it last worked correctly in Chrome?

Thanks for trying!

If you saw/see the text flashing just very shortly (while downsizing the window) then that's (most likely) the same garbled-text issue. (Only seldom is it the case that one can stop the resizing at the right point for the issue to stick around for a screenshot. Most of the time there's just a flash of the issue.)

(If you can check again some time, eg using comment #47, that would be great. If not I'd understand.)

> Do you know when it last worked correctly in Chrome?

I don't know whether it ever worked in Chrome. I had recently created the demo page, tested in Chrome, and noticed the issue (which doesn't occur in other browsers). The page doesn't exist very long / it's pretty new.

I hope that someone can reproduce the issue ...

I tried it again, several times, including several restarts (restart, try 3-4 times; restart, try 3-4 times; etc).

Also, I move the pointer diagonally so that I can move the edge of the window slower.

I caught the issue again, here's a screen video:
(In the video, watch the text "CSS Grid", it's garbled in the last second of the video.)

Deleted: screen_video_480p.mov 5.9 MB

	screen_video_480p.mov 5.9 MB View Download

(When you stop the above video right before the end, you can see that the "G" is garbled.)

I hope that the video is helpful for reproducing the issue.

The NextAction date has arrived: 2018-04-16

Has anyone ever managed to reproduce this?

I think on similar hardware and OS version it should occur as in the video.

I hope that someone can reproduce the issue, either using comment #32 or using the last paragraph comment #47.

Thanks

(After each OS-restart it it can be seen/reproduced quite easily, here.)