Current behavior
Grid is not visible as it does not respect the w/h = 100% set in the styles. I am able to see the grid instance after I manually change the h to calc(100%) in dev tools.
Expected behavior
Grid is visible, height of 100%
Minimal reproduction of the problem with instructions
Implement AG Grid and view on iPad ios 10.1.1
Please tell us about your environment:
IPad Air, os 10.1.1
ag-grid-angular version: 16.0.0
ag-grid version: 18.0.0
Angular version: 5.x.x
Browser:
Mobile Chrome 55 | iOS 10 Safari
This happened to me - the grid worked okay on Windows Chrome and Firefox, but didn't appear on iOS Safari or Chrome.
The problem was there was a div in the hierarchy without a height 100% - I was using flexbox for part of the view.
The solution was to just make sure all the divs containing the ag-grid have height: 100%.
Related
We have an app using spring boot. Works fine under Android or desktop.
When using an iPhone (we have tested it with iPhone 11 and 13), the layout width does not show complete, it is trimmed on both sides, it shows as if it would not fit on the apple screen. We have no issues with the height of the layout.
The base layout is a VerticalLayout, we set the size with setSizeFull();
iPhone
Android
I've developed a swiper (using the library of react swiper (http://kidjp85.github.io/react-id-swiper/) and unfortunately, the swiper is disappeared on the browsers of Safari and Chrome in iPhone devices - only iOS 12+. Just when i'm clicking on it, the swiper is shown.
You can see the problem when surfing this site through an iPhone device running ios 12 and above, the bug does not occur in iPhone devices running iOS below 12.
This is a demo site where you can see the bug. Surf from iPhone with iOS 12 to this site to see it.
http://qmerce.github.io/static-testing-site/articles/strip_stage/
Thank you
Use of translate3d pushes CSS animations into hardware acceleration:
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
on every swiper-slide element
I'm trying to build a portfolio website, wich works on desktop and mobile devices.
This is what i have right now: http://i305098.iris.fhict.nl/Portfolio/
The problem is on the image in the showcase section ,the image doesn't display how it should be doing. It works fine on all browsers and even in the GC emulator of iphone 5 but when I show the page on my Iphone 5 the image totally ignores any width or height given in the CSS.
You should try using PHP constraints for the image so that it resizes itself nicely, (Are you using wordpress or ?)
That would be helpful, Thanks.
I have developed a mobile web application which allows the user to take a picture with their mobile device camera and then displays it on an HTML5 canvas. When running this web application on an iPhone 5C under iOS 7, the image is severely vertically squished, so that it appears distorted and takes up approximately 20% of the canvas instead of taking 100% as intended.
This may be related to Safari image subsampling, which also caused vertical squishing in earlier versions of iOS and on other devices, although not nearly as bad as what is being seen in the above issue. A jquery plugin named megapix-image.js was created to address this issue and it works on iPhone4 and iPad running iOS 6 to correct this vertical squishing so the image appears correctly. megapix-image.js appears not to be compatible with iPhone 5/iOS 7 (it will not convert the image file).
Something to note is that iOS 7 completely corrected the vertical squishing issue seen on iPhone 4, but it has apparently made the problem much worse on iPhone 5/5C.
Is there a solution to this issue?
Solution:
<script type="text/javascript" src="~/Scripts/megapix-image.js"></script>
<script>
var mpImg = new MegaPixImage(file);
var mpImg.render(srcImage, {maxWidth: 960, maxHeight: 960});
</script>
where file is the file from the fileInput control and srcImage is the corrected image
I discovered that megapixel-image.js does work with iPhone 5 and iOS 7. I found I was calling some parameters incorrectly. The plug-in corrects the vertical squishing issue.
I'm using an svg background image on a simple anchor element and need the graphic positioned to the right of the element.
It works in most browsers, except on iPhone (fine on iPad).
I've set up two codepens - identical apart from using a gif or an svg image. The gif is correctly positioned to the right, but the svg isn't.
gif - positioned correctly on iPhone - http://codepen.io/johnholtripley/pen/yLDwF
svg - incorrectly positioned on iPhone - http://codepen.io/johnholtripley/pen/maCkb
I can't see any other reports of this issue - is this a known issue?
Just seen the footnote on caniuse.com's entry for svg - "Partial support in iOS Safari and older Safari versions refers to failing to support tiling or the background-position property." - http://caniuse.com/svg-css
Any workarounds available though?
You haven't stated what "type" if iPhone you are using. If you are using one of the older iPhone's, some content may not appear to be correct because the browser is not up to date (as the updates for that device have stopped).
When I was developing a website a while back, I looked it up on my iPod Touch 2 and the content appeared distorted; whereas when I looked up the same content on my newer device (5th gen), the content appeared correctly.