Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !18816

Switch to actually-Safari-specific CSS hack for iOS temporal input fix

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge fix-17308 into v4-dev Jan 09, 2016
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 2

Created by: cvrebert

Fixes #17308 (closed). Research backing up this hack: http://browserbu.gs/css-hacks/webkit-full-page-media/

Chrome screenshot with the patch applied (temporal inputs are no longer super-tall): chrome

iOS 9 Safari screenshot with the patch applied (text in temporal inputs is still vertically centered (at least by eyeball)):


The heights of datetime-local date, month, week, and time inputs in Chrome now become 40px, which is still different from the 38px height of the other textual inputs, but that particular discrepancy isn't caused by the iOS CSS that we're fixing here. Will open a new issue for that.

There is some slight redundancy in the generated selectors, but it doesn't affect the potency of the hack. Here's what I mean:

_::-webkit-full-page-media.input-lg,
.input-group-lg _::-webkit-full-page-media.form-control,
input[type="date"].input-lg,
...

I couldn't find a way in Sass, when nesting is involved, to tack a selector onto a selector list without it getting cross-producted with the nestees. Perhaps there's some particular Sass judo I don't know about.

CC: @mdo

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: fix-17308