0

I'm building a webapp that has to be compatible with at least IE10+, Chrome, Firefox and iOS wrapped in Cordova.

It works very well on Chrome. But it turns out every time I fix a collateral bug on IE or Firefox it creates some bug on iOS and vice versa.

Most recent issue is due to Firefox and iOS. Before the fix, iOS was working (overflow-x was scrolling well) well but Firefox was not respecting its parent width and right flex box was out of the screen. Once I fixed the issue on Firefox, overflow scroll would not work on iOS anymore.

Regarding IE10, some nested flexboxes also won't respect their parent's width and the last box is half way out of the screen (?).

Do you have a reliable source for cross-browser development with flexbox ? I've already tried a bunch of guides but they help fix a bug on some browser and creates a new one on some other browser...

EDIT : A comparative table that explain how each browser deal with properties would be great.

Thanks.

kfa
  • 2,106
  • 4
  • 17
  • 22
  • Post a minimal working code snippet reproducing the issue – Asons Jan 25 '17 at 18:42
  • There is a lot of issues when trying to do what you ask, so based on your markup structure it can get really messy. When we see the markup we might be able to suggest for what and where to use flexbox – Asons Jan 25 '17 at 18:46
  • Thank you for answer. Quite frankly, it would be hard to create a plnkr that would exactly represent the problems. The whole interface is made of flexboxes and I'm pretty sure that elements like
    may create issues... It forces to create an unnecessary box... So yeah, the markup is getting messy :/ Well, a reliable link to some good resource would be a great help.
     – kfa Jan 25 '17 at 19:02
  • Then I will say that Stackoverflow is most likely the best resource, you just have to break down each issue into a reproducible and answerable question – Asons Jan 25 '17 at 19:06
  • http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Jan 25 '17 at 19:08
  • Is there a comparative table that shows the way each browser interprets properties ? It seems like they don't deal with height/width/flex-basis/overflow the same way... – kfa Jan 25 '17 at 19:40

2 Answers2

3

It's possible that what you are trying to achieve simply isn't doable using flexbox, which is not fully supported by all the browsers you list.

Flexbox is known to be buggy on IE10, and may need prefixes on many of the browsers you are building for. The following is a good resource to find out which browsers fully support any given feature: http://caniuse.com/#search=flexbox.

You may find the "known issues" section relevant to figuring out if the issues you are having are documented.

Some specific information about the bugs you are encountering might help provide a more specific answer.

Edrosos
  • 70
  • 1
  • 7
  • Thanks for the link but I already know common issues but I'd would love to have a comparative table to see how browsers interpret properties. Using flex-basis instead of height/width fixed a lot of problems.. Now I need to see why overflow works differently between browsers. – kfa Jan 25 '17 at 19:39
0

It sounds like you want this:

https://github.com/philipwalton/flexbugs

Self-described as "a community-curated list of flexbox issues and cross-browser workarounds for them."

user2171796
  • 397
  • 2
  • 16