So I made a search bar, and everything works fine. Except the css.
This is what it looks like on computers:
Search bar on computer
And this is what it looks like on iOS: (tested on iPhone, iPad, and iPod)
Search bar on iPad
You'll notice that on the iPad, the search text height is greater than the button.
This is my css:
input.searchFormText {
-webkit-appearance: none;
-webkit-border-radius: 0;
padding-left: 2.25px;
border-top-left-radius: 4.25px;
border-bottom-left-radius: 4.25px;
height: 19.5px;
border-color: gray;
border-style: solid;
border-right: none;
border-width: 0.5px;
background-color: white;
font-size: 12.25px;
font-family: "Open Sans";
transition-duration: 0.225s;
}
So I need the search text input height to be less, but only on iOS.
For some reason iOS Safari gives the input element a different default padding than other browsers. Just set the padding-top and padding-bottom of your input and it should have the same height in every browser ;)
Related
I was trying to hide scrollbar in for specific ul but wanted to allow horizontal scrolling and I tried below
.ul::-webkit-scrollbar {
display:none
}
it worked for all the browsers and devices except safari and iOS respectively
I've found a work around :
.my-element::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent; // HERE IS THE TRICK
}
I have a problem with the scrollbar in the drop down menu in iOS.
I would like it to stay always visible when I open the menu, but this only works on Android and not in iOS. This is the code I have used
::-webkit-scrollbar {
-webkit-appearance: none;
width: 2px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #E2BC69;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
opacity: 0.5;
}
On CanIUse these properties are available on iOS (tested on iOS 9 and 10). Do you know how to fix this issue?
you could try overflow:visible;
Some html code or even a fiddle can be helpful your question is not clear
I have an iFrame generated by ThingLink that I need to drop into an existing web page and behave responsively.
I would have thought that the usual CSS used to make YouTube or Vimeo iFrames would do the job. Which it does on most browsers, but for whatever reason this does not seem to be the case for Safari on IOS (Safari desktop appears to work). Why is this? Is there something in the Iframe's HTML that is causing an issue?
Here's a Fiddle showing the iFrame in question misbehaving (top) and a sample YouTube iFrame behaving (bottom).
And of course the actual code I am using
HTML:
CSS:
div.iwrap {
width: 100% ;
position: relative;
padding-bottom: 60%;
height: 0;
-webkit-overflow-scrolling:touch;
overflow: hidden;
}
.iwrap object,
.iwrap iframe,
.iwrap embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
border: none;
}
iframe,
object,
embed {
max-width: 100%;
}
You can see I've tried trying out the absolutely positioning each corner of the iframe, but with no joy.
I should stress that it is only Safari on IOS that it breaks. Safari for desktop and Android for mobile look good.
Any pointers to get that working would be much appreciated, but more importantly, why isn't it.
Using responsive iframe code I devised for myself, and using your src= url, I created and tested this Pen on CodePen.
Using CodePen's CrossBrowser Testing, the Pen displays and functions correctly on Android mobile devices. (With one exception: the embedded Youtube video has no audio in CrossBrowser Testing although in normal view it does.) But on iOS devices it displays only a black square where the content should be.
I'm not certain from your post whether this is the failure you are talking about.
I have other Pens, e.g., Responsive Iframe - Base Code, which function correctly on iOS devices. Just the one using your src= url does not.
This leads me to wonder whether, even though using known responsive HTML and CSS, there is something about the source that's not playing nicely with iOS.
I'm not sufficiently versed in the technology to be able to suggest what that might be, however, I hope I've demonstrated that even with code known to be responsive the source document doesn't display in iOS. Thus, the problem appears not to be with the code but rather some conflict inherent between the source and iOS.
Sorry I couldn't be of more help, but maybe this will help you to rephrase the question and question title more narrowly and specifically so that it will grab another user's attention.
The editor insists that, with a link to CodePen, I must include some code. So, merely to satisfy that requirement, here is my responsive HTML and CSS code.
HTML:
<div id="Iframe-Thinglink"
class="set-margin set-padding set-border set-box-shadow
center-block-horiz">
<div class="responsive-wrapper
responsive-wrapper-wxh-600x480"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="//www.thinglink.com/channelcard/632903487365054466">
<p>Error Message Here</p>
</iframe>
</div>
</div>
CSS:
/* CSS for responsive iframe */
/* ========================= */
/* outer wrapper: set the iframe's width and height by setting
max-width & max-height here; max-height greater than
padding-bottom % will truncate to padding-bottom % of max-width */
#Iframe-Thinglink {
max-width: 600px;
max-height: 100%;
overflow: hidden;
}
/* inner wrapper: make responsive */
.responsive-wrapper {
position: relative;
height: 0; /* gets height from padding-bottom */
/* put following styles (necessary for overflow and scrolling
handling on mobile devices) inline in .responsive-wrapper around
iframe because potentially unstable in CSS:
-webkit-overflow-scrolling: touch; overflow: auto; */
}
.responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-650x315 {
padding-bottom: 56.25%;
}
.responsive-wrapper-wxh-600x480 {
padding-bottom: 80%;
}
/* general styles */
/* ============== */
.set-border {
border: 5px inset #4f4f4f;
}
.set-box-shadow {
-webkit-box-shadow: 4px 4px 14px #4f4f4f;
-moz-box-shadow: 4px 4px 14px #4f4f4f;
box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
padding: 40px;
}
.set-margin {
margin: 30px;
}
.center-block-horiz {
margin-left: auto !important;
margin-right: auto !important;
}
i have created a multibox helper in mvc3 using div and all the items appear perfectly and vertical scrolling works fine too but when i scroll down slowly within div some text appear blur and if i let it go for few secs it adjusts and the text is visible good. This appears as if i am buffering the data while scrolling.
Any suggestions?
This is the css i am using on div
border: gray 1px solid;
width: 350px;
height: 150px;
float: left;
overflow-y: scroll;
background-color: White;
This bug has already been discussed here, but I haven't found a solution to it yet.
There are small lines on the top and bottom of my background image that appears to be the background color. Both the background image height and container height are the same (29px), and the image is not transparent, but rather with a white background. There isn't a border at all on the container, so this leaves me a bit stumped. This looks fine in Safari on a Mac, but shows the above issue on iPad.
html:
<a class="help" href="#">Help</a>
css:
.help {
color: #fff;
display: block;
float: left;
font-size: 12px;
font-weight: bold;
background-image: url(../img/help.png);
background-repeat: no-repeat;
background-color: #ee3224;
height: 29px;
line-height: 29px;
padding: 0 10px 0 26px;
text-transform: uppercase;
position: absolute;
left: 0;
top: 0;
}
I had the same problem, It appears to be a difference between the way IPad safari calculates img size and it's container block size.
This is discussed more here https://stackoverflow.com/a/6324025/1210282
The solution being to add an outline of 1px to your image to stop the background bleeding through
I found a solution for this.
It's quite simple, just use:
background-clip: content-box;
background-size: cover;
where the background-color and background-image is set.
Since I have padding on the box where this bug is happening, what did the trick for me is:
background-clip: padding-box;