I have two key issues and have attached screenshots to demonstrate the problem.
I noticed that at certain breakpoints, Box 12 positioning gets funky and overlaps with Box 11. And this is a problem that only occurs in Webflow Design view (i.e. Chrome) and in the published version when viewedon Chrome. The same website doesn’t have these breakpoint issues when viewed on Firefox. Specifically, the Box overlapping issue occurs at 1876px, 1808px, 1684px, 1442px, 1412px, 1206px, 1158px, 1056px, 1032px, and probably at other breakpoints. Webflow suggested it was some custom coding that I had in the header that was causing the problem. But the custom code I have inserted isn’t related to Box 11 or Box 12. I have deleted the custom code, republished, but the overlapping at certain breakpoints still exist.
On IE, there is a lot of flickering going on when adjusting browser width. Also, at certain breakpoints, the logo/branding link gets cut off and stretched. None of these issues appear when viewing on Chrome or Firefox. At a certain lower breakpoint (probably around iphone landscape breakpoint), a line from my logo actually disappears! See snapshots. I am setting the branding_link (link div that holds the logo image) to be 65vh. My goal is to have a Hero section that’s always the height of the browser and the 65vh seems to work on the other platforms (including iPad). I have disabled this feature for mobile and tablet devices.
Here is a short video I took of the issue (it’s still being converted on Vimeo and will be done in 30 minutes): IE Website Issue on Vimeo
Hi @khuang, Thanks for the detailed post! It’s really helpful - I took a peek at your site (with and without the custom code) and both appear to work as expected :-/
The overlapping boxes (box 11 and box 12) still appear when in Webflow Designer and when published on Chrome. It happens near the bottom of the home page at certain breakpoints. The “cycle of collaboration” box, at certain breakpoints (1032px for example), jumps and overlaps the “upping normal” box. If you drag the browser window and focus on that section, you will see the boxes overlapping at certain break points. This issue is still happening, but never in IE or Firefox.
See screenshot:
The flickering and logo distortion on IE is still happening and I am using IE 11 (Version 11.0.9600.17905 , Update Verisons: 11.0.21). It is the latest version of IE.
Overlapping Boxes in Chrome at certain breakpoints (home page):
I reorganized the order of the lasts 3 boxes (box 10,11,12) so that it followed a more natural flow instead of relying on forced CSS positioning through negative percentage margins. This seemed to solve the problem.
Flickering in IE 11 (Hero section / logo / on all pages):
I think a combination of using SVG images and percentages for the size of the logo image caused the flickering. When I used a PNG image for the logo and set the containing div width in percentages, flickering didn’t happen. When I used a SVG image but set the width of the container div to be in pixels (instead of percentages), the flickering didn’t happen. I opted to keep my SVG image and kept my container div (holding the SVG image) in pixels.
