I have an weird issue, with flexible boxes on Ipad.
I really like -box-flex futures in css3 but,
When I use -webkit-box-flex: 1 on the page, my HTML5 website is very very slow, especially I can feel it when I try to show a popup box, which already exist on the page , I just show/hide the box.
my css ex:
-webkit-box-flex: 1,
box-flex: 1
More flex boxes I use, slower Website gets, if I remove all flex and add static width and use float, everything works fine.
Does someone have this issue as well? IS it a webkit bug or something else.
Does someone have a fix or an alternative way to use flex?
I found as well this info:
http://css-tricks.com/old-flexbox-and-new-flexbox/
where they suggest to use display: flex; instead display: box; and instead
-webkit-box-flex: 1 to use -webkit-flex: 1
I have tried, and really helps when I use chrome (desktop), but Ipad safari seems like doesn't support new -webkit-flex
I really appreciate any help or suggestion what I can do in my situation.
Thanks !!
Related
I have a web application using angularjs and material-design.
I use md-dialog for adding and editing certain records from the database. This is responsive and works as expected on my desktop for all browsers except IE (no great surprise). This is how it is supposed to look.
However, if I run the application in safari on a Mac, or any browser on iOS (including chrome), the dialog appears to be missing the contents (has no height).
While IE doesn't have exactly the same issue, it does appear to be similar. So, I believe it is an issue with how iOS renders the flex attributes. However, I am not sure and don't know how to confirm on my iPad.
My search so far has not provided any working solutions to this issue, but I have seen others ask the same question (though not through stack).
What causes this issue?
How do I fix it for an iPad?
UPDATE
This is how the dialog is rendered in the html:
<md-dialog-content class="flex" id="dialogContent_140" flex>
<form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
...
</form>
</md-dialog-content>
If I modify the element and remove flex like this:
<md-dialog-content class="flex" id="dialogContent_140">
The body content appears as expected (at least on the MAC).
I can also modify the css in angular-material.min.css and remove -webkit-flex, -ms-flex, flex and achieve the same results.
[flex]{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
}
I can't completely kill flex for the rest of the application, but I have to allow this to work on an iPad.
I found the cause of my issues. Thanks to #Tran Khanh Nguyen for moving me in the right direction.
When the dialog was defined, someone added <md-dialog-content flex>. I removed flex and it fixed the issue on all devices.
For more information, with some special browser (e.g. IE, IOS browser...) we should consider to add the value for flex, like flex="auto" or flex="100", it will help anuglar-material would fine on these browsers.
I hope someone can help me out here. I have a form with HTML placeholders. It is done with ContactForm7 in WordPress. I have testet it in IE11, Chrome, Firefox and Safari and it works great.
But in Edge 20 it is not :-(
According to this link http://caniuse.com/#feat=input-placeholder, Edge should support it.
The form can be seen on https://www.suresms.com/dk/gratis-sms-testkonto/
Hope for some good help.
Glen
Yep it is working in Edge.
The issue you have here is somehow linked to the
position: relative;
You have in your span.wpcf7-form-control-wrap selector.
I removed it and it worked.
I've been creating a portfolio website for a friend. In an attempt to make the site responsive and artsy, I chose to pull in twitter bootstrap and skrollr. I noticed that in safari in iOS that the site seems to be cut off at a certain point. Has anyone else ran into this issue before? I have provided a link below in case anyone notices anything obvious.
http://jennaparysek.com/
Thanks!
A lot of people (including myself) are having troubles when using skrollr on mobile devices. In order to use both "fixed" and "relative/absolute" position at the same time, you have to put all the divs that are not fixed inside a div called #skrollr-body
However, the real problem is that your skrollr is being confused when getting the height of your
skrollr-body. you can try to put forceHeight: false inside your skrollr.init()
if that doesn't work, it might because skrollr doesn't know where is the end of #skrollr-body, so just put an empty div after your #skrollr-body and give it a keyframe. It should works just fine now :)
Do you have any ideas why my websites keep crashing on single post template? It is powered by Wordpress. The problem appears only on iPad (I've tested two iPad 2's).
http://luzlol.me
How do I diagnose such things? Thanks.
update: I figured out the reason.
display: -webkit-box;
crashes my iPad on single post template (like http://luzlol.me/bittorrent-sync/ this one), don't know why.
Deativate W3TC and use your dev tools console to fix your jQuery errors. Use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE.
Use the http://validator.w3.org/ to check your html and css.
It appears to be a webkit bug, nothing to do here. Thanks. I hope this one will be fixed soon.
My internet was just shut off... so I'm at the library trying to fix one last feature of my test page (and eventually my site) before the portfolio review date on the 1st (TOMORROW!!!).
Here's the problem, all this time I've been testing compatibility of my site with IE9/FF4/Chrome12/Safari (latest) but NOT IE7/8. My site/test page works as I want in the browsers I've been testing with.
As luck would have it, the library I'm at has IE7 installed and apparently won't upgrade to IE8, which I think would render my page correctly. I think so due to finding many instances of issues with page renderings in IE7 while there are none in IE8 for the same page through some investigating.
Anyway, on the test page linked above, the text tab slide-out div in the top-left corner of the page isn't displaying and oddly enough, a simple image link at the bottom right of the page isn't either. Those two happen to be the first and last links on the page, if that helps at all (I'm thinking it may have something to do with that). Everything else on the test page is functioning/displaying properly. Just view the test page through any of the above browsers that I've tested with to see how it should display/function.
I've tried adjusting the z-index (as I've found a few cases where that was the culprit of the IE7 misbehaving) but to no avail. I'm stuck and don't know where to go next.
Any help/pointers would be very appreciated as this is getting reviewed tomorrow! A lot is riding on this review and I want to ensure that the reviewers can view the page as intended if they are using IE7.
Edit: CSS, JS
In your CSS, if you change your
.SU{
display:inline-block;
}
to
.SU{
display:block;
}
You can see the jaguar no problem.
Apparently, IE7 has issues with display:inline-block;
I would google "CSS differences between IE7 and IE9" and "JavaScript differences between IE7 and IE9".
Also, IE7 and IE8 do not support HTML5 markup very well (or at all). So I hope you aren't using that.
Problem with this CSS style:
.SU
{
text-indent: -9999px;
}
This is hiding the image for me when I run your test page in IE9 in compatibility mode. When I remove the text-indent style I can see the cougar image at the bottom. I seem to remember reading about this text-indent hack being a way for screen readers to read the link, but developers found it was breaking when new (IE7+) browsers were released.
When I run the page in IE9 in compatibility mode, your "Text" popout menu works fine.
IE7 inline-block trick
#id {
display: inline-block;
*zoom: 1;
*display: inline;
}
For why, search google for "hasLayout". ...oh how i love IE...
With regards to the text options, have you tried messing about with the left offset (-140px) applied to your <div class='optsdiv' > perhaps trying it set to zero [0] or even omitting the attribute entirely.
I know changing this value won't necessarily fix your issue, but it might point you in the right direction...
Bottom link seems to work on my IE7 by the way... not sure if you've perhaps fixed this issue already. my build version is 7.0.5730.13 for reference.
Good luck with the fix! IE sux ass...
IE 7 doesnt support block elements (like button) in a-tag... that was the problem here i had.