#StackBounty: #css #ipad #webkit #mobile-safari #ios12 iPad (mobile Safari) select option font size inconsistency

Bounty: 50

In my responsive web app, select option font size gets auto resized in iPad resulting each option text to have inconsistent font size. (screenshot from iOS12 iPad simulator)

enter image description here

I did research and tried everything that I came across:

  • -webkit-text-size-adjust: 100% (to body)
  • -webkit-appearance: none (to select)
  • Wrap <option>s with <optgroup>
  • set font-size of select to 16px in CSS

But none of them seemed to do anything.

<select>
  <option value="None"></option>
  <option value="1">Lorem ipsummmm sitamet consectetur</option>
  <option value="2">Adipisc elitsed eiusmod</option>
</select>
body {
  -webkit-text-size-adjust: 100%;
}

select {
  font-size: 16px;
}

Here’s jsFiddle

What I want to achieve is for the font size to be the same size regardless of option text length, if it’s ever possible.


Get this bounty!!!

#StackBounty: #javascript #html #css #webkit #chrome-ios Chrome on iPhone overflows content on empty page (on new tab only, not reload)

Bounty: 200

On IOS Chrome, the body overflows on a new tab or page with no content, but if the page is reloaded, the problem is fixed. It poses a problem for any element positioned at the bottom (absolute or fixed). Here is the code to reproduce the problem:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <style>* {
         box-sizing: border-box;
         }
         html{
          height:100%;
         }
         body {
          height:100%;
          background-color:yellow;
          margin:0 0;
          border: 30px solid red;
         }
      </style>
   </head>
   <body></body>
</html>

The border should be shown all around the viewport but is being hidden behind the bottom Nav bar. Here is the result from the code above:

New page / tab on Mobile chrome

After page reload

Things I have tried (none of them worked):

I have tried for a week to find a workaround but to no avail. Any help would be greatly appreciated

Edit: My issue is different from HTML body not filling complete width on mobile devices as I don’t have an issue with filling the body, I have an overflowing body issue and mobile chrome behaving differently on a new page as opposed to an existing page. The workarounds on the page didn’t work for my issue

My question is the following: Can somebody find a way using css or JS for the HTML body to not overflow when a new page is opened using the code above?


Get this bounty!!!

#StackBounty: #html #css #flexbox #webkit Old webkit browser that do not support flex-wrap

Bounty: 300

The current html works fine with bootstrap 4 wrapping and creating a two column layout. Problem is with older browsers that do not support bootstrap or flex and use an older version of webkit. What is the alternative or equivalent to flex-wrap: wrap; and -webkit-flex-wrap: wrap; for old webkit browsers like Safari 5 for windows or Midori windows/linux?

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”false”>

<

div class=”snippet-code”>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
</div> </div> </div>