Okay, so I've got a couple of headers with links in them. Like this:
<h1>text</h1>
And then I rotate them using CSS3, like this:
-webkit-transform: rotate(-90deg) translate(-63px, -117.5px);
-moz-transform: rotate(-90deg) translate(-63px, -117.5px);
I also use the translate prop. to position them where I want (rather than absolute positioning), for backwards compatibility purposes.
Now it looks perfect on Firefox or Chrome, but when I look at it on Mobile Safari it has these weird semi-transparent boxes going from the right of the container all the way off screen.
Any thoughts off hand? I can post examples if I have to, but before I do does anyone know what it could be? Thanks!
I solved it. For future reference, the problem was a bug in Mobile Safari.
I had a 'text-decoration:underline;' on the link that I had rotated, and for some reason Safari stretched that out and made it partially transparent. No idea why it did this, but removing the text underline solved the problem. Thanks for your thoughts, everybody!
The problem is that -webkit-transform and -moz-transform are browser-specific, and do not work with other browsers (i.e. Opera, IE, etc.). Reference: CSS3 transform from MDN. Safari for desktop should be working with -webkit-transform; the status on iOS Safari is unknown.
The following code should work on more browsers (i.e. it should be more portable):
transform: rotate(-90deg) translate(-63px, -117.5px);
-webkit-transform: rotate(-90deg) translate(-63px, -117.5px);
-moz-transform: rotate(-90deg) translate(-63px, -117.5px);
-o-transform: rotate(-90deg) translate(-63px, -117.5px);
-ms-transform: rotate(-90deg) translate(-63px, -117.5px);
Related
I am extensively using the showPopupDialog(...) function of Dialog and it works fine. I remember that in the past it didn't work on Android or there were problems on Android, but now it works pretty well on Android.
But I have a styling problem with Android. Basically I want there to be a Component shown in the middle of the Dialog. This is the easiest case, sometimes I add buttons on the south side. In both situations, however, I can put the content of the Dialog popup exactly on the center on iOS only, while on Android there are problems.
This is my current CSS:
#media platform-and {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
#media platform-ios {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-top: 0px;
}
}
The main difference between iOS and Android is that while iOS works correctly with this CSS whether the arrow is up or down, on Android, to get the same result of iOS, I would need a CSS made like this:
#media platform-and {
PopupContentPane-ArrowTop {
margin: 0px;
padding: 1.5mm;
}
PopupContentPane-ArrowBottom {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
Or something similar (with a few more tweaks).
So, on Android, when the arrow is on the bottom I need an extra padding-bottom. That'all, but it's not possible because currently there aren't an UUID for the PopupContentPane when the arrow in on the top and another UUID when the arrow is on the bottom.
Any idea or workaround? Thank you
(I add that so far this is the only situation where I need to use the #media tag of CSS to differentiate iOS styles from Android styles.)
Originally when we wrote the popup dialog it was an iOS only feature since the styling were only on iOS. We used a 9-piece image border to do the popup and we didn't want to replicate that theme element in every one of the native themes so we left it to the developer.
Later on we came up with the ability to show an arrow on a RoundRectBorder. Another advantage was the move on iOS/Android to flat design which made the previously complex dialog style into a simple solid white popup. So we implemented this cross platform in white. But because iOS has the pre-existing image border it's still used on iOS and wasn't removed. We should probably remove it and deal with the minor compatibility issues that arise.
I recently worked on that in InteractionDialog here: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/components/InteractionDialog.java#L786-L815
It might make sense to do something similar for Dialog which doesn't seem to have that code anywhere: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/ui/Dialog.java#L1209
The main div is 600 pixels wide. By my understanding, an iPhone 5 is 640 pixels wide. But when I pull the website up on the iPhone 5, the main div only takes up a small fraction of the screen, maybe a third. Why is that?
Website
So I've seen IOS shrink content so that the whole page is displayed on the phone screen when using css transforms.
So the offending css was
background: url('/images/mobile-device-down-arrow.gif') no-repeat center;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg) scale(1);
we replaced it with
background: url('/images/mobile-device-up-arrow.gif') no-repeat center;
and it fixed the problem.
I remember a bug in webkit for this, but I can't find it right now.
This just happened to me and I managed to fix the issue by wrapping the affected elements that were being shrunk in a div that defined the exact width that the element needed to be, in my case this was: width: calc(100vw - 2rem);
Hopefully this helps anybody having this issue, it seems to only occur on mobile devices when using the rotate transform with transition at any positive degree as when removing the transform, the element reverted to 0deg without shrinking.
I asked something similar before, but I guess I wasn't really clear and that's maybe why my question was voted down twice. Let me see if I can make a point here.
I'm using Nivo Slider on a website I'm working on I'm and very glad with its behavior, especially because it resizes automatically when I'm using different viewport sizes. It works great on my monitor, it works great on my smartphone and it works great on my tablet. It resizes like magic!
I've read all the code and I couldn't find how Nivo Slider does it. No media queries or viewport metatags. I'm really interested in making my website resize the way Nivo Slider does.
Would love to hear from all of you who are familiar with Nivo Slider or who might give me a helping hand.
If necessary: http://dev7studios.com/plugins/nivo-slider
I like to use it like this, to get responsive without problems:
css
#nivoSlider, #nivoSlider img{width:100%;height:auto !important}
HTML:
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="nivoSlider" class="nivoSlider">
<img src="" />
</div>
</div>
Just figured it out: it uses width:100%. I didn't realize it could be that easy.
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
left:0;
margin-top:100px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
I have noticed a very strange behavior with text inputs on mobile webkit (mobile safari/android stock browser/chrome)
When an input is inside a div (or any container) that is transformed (has -webkit-transform: translate3d(-100%, 0px, 0px); for example), when the input is filled with text, the visible area is no longer adjusted to follow the cursor.
Please see a demo at http://jsbin.com/itodip/2/
This is only reproducible in mobile browsers!
The only workaround I have found when working with translated divs was to remove the transform on transitionEnd, but this is not ideal.
Any suggestions and possible workarounds?
I've encountered this bug before and I did find a workaround. What I did was set the css "left" property to a high negative number, and then I used the "-webkit-transform" property to move it back to be visible on the screen. For some reason that fixes it.
left: -2000px;
-webkit-transform: matrix(1, 0, 0, 1, 2000, 0);
Here's a link to the stack overflow post I did on it: Scaling input boxes with -webkit-transform
I have some button controls with CSS line-height: 18px. Some are input controls type="button", and others are anchors stylized to appear as buttons like the input controls. In FF3.6.12/IE8 they are displaying the same height, but in IE7, the anchors are shorter in height. How do I get them to display correctly in IE7?
I took your demo: http://jsfiddle.net/DnGvF/
and added just this CSS at the end: http://jsfiddle.net/gRF9g/
/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
overflow: visible;
*height: 24px;
*line-height: 15px
}
Some explanation of what's going on there:
There's a known bug in IE7 that overflow: visible fixes, related to the width of the button. Try looking at my demo in IE7 with and without it.
I'm using the Star property hack to provide change the height and line-height for only IE7 and lower. You can tweak the numbers I picked if you need to.
That hack is invalid CSS, but there's no problem using it. It's never going to come back and bite you - it's a "safe hack". Nevertheless, if you require 100% valid CSS, there are alternatives.
It now looks consistent between IE7 and the later versions.
Yes, this is a little kludgy, but at least it's all together in the CSS in one place, with a clear comment.
Honestly, if IE7 is the only problem, I'd just go with a hack and bump up the line-height:
*+html .button { line-height:24px }
If you use something like Modernizr, you could do away with the hack and use:
.ie7 .button { line-height:24px }
Of course, the other alternative is to actually track down why IE7 is behaving the way it is, and rewrite your CSS accordingly, but without any posted code, I can't help you with that.
EDIT: Forgot about this method of targeting just IE7:
<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->
Buttons in IEs have additional padding/borders/whatever - they do not style well as in other browsers.