CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: iphone Safari Padding Issue  (Read 504 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
iphone Safari Padding Issue
« on: 17 Jan 2021, 04:32:03 am »
myPen

The footer padding seems to be lost on the iPhone safari broswer - may effect others browsers as not tested them but I have never experienced this before... is it becasue I am using a flex wihin a flex?

 
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: iphone Safari Padding Issue
« Reply #1 on: 17 Jan 2021, 01:58:14 pm »
The "universal reset" can have oddball repercussions, this COULD be part of it. It's why I suggest more verbose resets as applying *{} can go a bit wonky for margin. MORE of an issue on form elements it's part and parcel of why I say "just don't do it"

What's with the empty "anchors for nothing"? Are you still trying to use the outmoded "name" approach but switched them to ID's? If so, just put the ID's on the DIV/SECTION and drop the pointless anchors. That's what ID's are for.

But overall I'm not seeing anything too far off, but could you define "lost"... oh wait, you're relying on the DEFAULT flex behavior, which on some devices flex-shrink is ON by default.

Try setting flex:0 0 auto; on both <header> and <footer>. If shrink is on, it'll shrink smaller than its content.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: iphone Safari Padding Issue
« Reply #2 on: 18 Jan 2021, 12:25:29 pm »
The "universal reset" can have oddball repercussions, this COULD be part of it. It's why I suggest more verbose resets as applying *{} can go a bit wonky for margin. MORE of an issue on form elements it's part and parcel of why I say "just don't do it"
I have always done the reset via the * and have never experienced this problem...but change it out anyway... :)

What's with the empty "anchors for nothing"? Are you still trying to use the outmoded "name" approach but switched them to ID's? If so, just put the ID's on the DIV/SECTION and drop the pointless anchors. That's what ID's are for.
I didn't know that the links would target div's too... Sorry! I'll update my code! :)

But overall I'm not seeing anything too far off, but could you define "lost"... oh wait, you're relying on the DEFAULT flex behavior, which on some devices flex-shrink is ON by default.

Try setting flex:0 0 auto; on both <header> and <footer>. If shrink is on, it'll shrink smaller than its content.
:o :o :( Oh!! I completely forgot about that - and that should fix my issue! THANK YOU!!! :) :D :)
« Last Edit: 18 Jan 2021, 03:01:39 pm by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: iphone Safari Padding Issue
« Reply #3 on: 19 Jan 2021, 02:02:01 am »
I’ve been thinking about this issue, is the problem basically they Safari doesn’t like nested flexes?!

Thanks once again for your continued support! I appreciate it!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

 

SMF spam blocked by CleanTalk

Advertisement