auchenberg / vscode-browser-preview

A real browser preview inside your editor that you can debug.
MIT License
4.39k stars 154 forks source link

Fix a bug in safari where browser image is not displayed #179

Closed eliknebel closed 3 years ago

eliknebel commented 3 years ago

This PR addresses an issue where display: none css in Safari hides the browser image.

The fix here changes display none to instead passthrough pointer events and position the image absolutely, allowing the canvas element to sit directly behind it.

Closes #178

enesccinar commented 3 years ago

Hey guys, thanks for the extension. I am still having trouble with this issue.

eliknebel commented 3 years ago

I tired submitting an initial fix PR for this but realized that it scrolling on iPadOS still was not working, so I closed the PR until I find a fix that works on iOS too. However, the fix does work for macOS Safari

eliknebel commented 3 years ago

After poking around in the source code and testing out some different changes, I'm starting to believe the scrolling issue on iPad is related to https://bugs.webkit.org/show_bug.cgi?id=210071 which fixes have landed on iOS 14.5 beta but may not have landed in the chromium builds (and it may never, since this was an issue specific to iPadOS and mouse/trackpad scrolling).

In any case, I do believe the fix here is valid for Safari users, and possibly another workaround for scrolling on an iPad can be introduced later? (scrolling using arrow keys, rendering custom scrollbar, etc..).

I am going to reopen this PR, but it should be vetted and taken cautiously. After studying the source code further, I realized the canvas element itself was rendering the screen coming from the headless chrome browser and simply using the html img element to hold the image data. It's unclear to me exactly why this fix works, but I believe it either has to do with Safari not wanting to load the image data from an image that is display: none -or- there is some sort of canvas memory issue in Safari when it tried to render the image in a canvas, and it simply bails out; by removing the display: none css, the image is allowed to be rendered directly by the browser which then passes pointer events through to the underlying canvas.

enesccinar commented 3 years ago

thanks.. yes, the scroll problem was about the webkit and fixed on ipados 14.5 beta version.

auchenberg commented 3 years ago

Closing as per my comment in https://github.com/auchenberg/vscode-browser-preview/issues/178#issuecomment-782740452.

This doesn't fix the underlaying and real issue

auchenberg commented 3 years ago

And a big thanks for taking the time to contribute, I really appreciate it! 🙇