Interaction rendering issue in IE / older browsers

Design help Animations & Interactions
1

Hi,

while preparing a site I’m running into different browser problems.

The main thing is the transitions I made for the logo and menu are. It works fine in Chrome, also in Firefox, but just partially in Safari and for sure not in IE.

I’m a little bit shocked about that, as my plan was to prepare some more sites with webflow and now I’m running into browser compatibility problems. This seems to be against the concept of Webflow, what is pretending to build sites without coding.

Does anyone know how to solve this, or having similar problems?

Best regards Harald

Here is my public share link: LINK
(how to access public share link)

2

Can you please post some video or Gif on the problem experienced? As well as the link to the published site?

Note: IE does not support Flexbox (this is not a Webflow problem but rather IE’s where the browser is not good)

3

Hi @pupinko, it will also help to know what version of IE/edge is being used. I can see that Edge 14 does not appear to have any glaring issues:

657×555 1.43 MB

Thanks in advance!

4

Hi Vlad,

here you can see the Safari problem, means the “halbinger” element is turning small and scrolling up is not getting back to the original state.

and here the correct behavior in Chrome.

Concerning the public share link it is already part of my first post. Is’nt it working?

5

Hi @cyberdave thanks for this input. Really it seems to work fine in your Edge 14. I have to ask a friend of mine again, what version this was, as I don’t have Windows here for myself.

6

Hi @pupinko, I can see the issue in Safari, it looks like some styles are not getting rendered in Safari the same way as chrome. I am checking to see if it is a matter of adjusting the height for certain elements.

7

@VladimirVitaliyevich Another question. Would’nt it be great to have the compatibility information direct in webflow. Like a tooltip, showing the compatible browsers. Or at least a list with browser issues in general and some information, what browsers are senseful at the moment? Or another suggestion. Why not bring in a special mode, where just the actual senseful supported browser functions are available. Something like the “advanced” buttons. Btw. they are showing the flex box options, allthough you say, they are not supported by IE.

While bringing my website process, from giving the whole coding work to a professional coder, to a platform like webflow, I think it’s very important to be able to rely on it and to get context sensitive support in the tool itself.

8

In Firefox I got another problem with this picture, what is stretching in height.

See screenshot here:

@cyberdave Do you know, how to fix that?

9

Here’s where you can find the browsers supported for flexbox. :wink: Can I use... Support tables for HTML5, CSS3, etc

Sometimes some options of flexbox work in IE, some times they don’t … it is unpredictable.

10

@VladimirVitaliyevich Thanks for this feedback. I know this, meanwhile.

This is a sad story with IE. But I still would recommend to have something like that direct in Webflow, as mentioned before, while I’m just following your vision “The Future of Web Design Is Not Code” ;-).

11

Hi @pupinko, on the image styling there is a max width set to 57%. remove that and add a width to the style on the image, to be 57% (or whatever width you would like.

1297×770 731 KB

I hope this helps with that.

12

Hi @cyberdave this works great. Thank you very much.

1 Like
13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.