I found strange problem. I used this basic example of google maps. This maps works on all browsers except on default browser in my Samsung GalaxyTab (Honecomb 3.1). In this browser there are hidden controls. Or controls have bad z-index. If I move with map, I can see them for a while. There is no problem in default browser in Android 2.3, in Firefox on tablet, or any other browsers. Does anyone have solution for it?
Thanks!
I discovered this bug today as well, but I'm trying to get an element float on top of a google maps element. I found a fix at: https://github.com/CloudMade/Leaflet/issues/335 and that is to add:
.gmnoprint {
-webkit-transform: translate3d(0,0,0);
}
This forces the element to be on top, for some really odd reason. The line above works for the built in zoom controls etc on my Samsung Galaxy Tab 10.1 and can of course be applied to all elements that should be on top.
Related
I am having a weird problem with #font-face and svg images specifically on the Samsung Internet Browser on a webpage I am developing. It has some pretty strange issues.
Part 1: The font-face problem.
I am using 2 font-faces. For some reason in the footer area they load perfectly fine. But in other parts of the document they don't. Example:
Image of footer area
On this image, the blockquote is displayed with the correct font, below that the Follow Us part uses the second font-face and it displays correctly too. The About Us heading uses the same font-face as the blockquote element but it doesn't display correctly. Now, the second image:
Image of header area
The problem here is that the About Us huge heading uses the same font as the Follow us text in the footer area (visible in image 1), but it's not displaying correctly.
Part 2: The SVG image problem
In the Image of header area if you focus on the upper border of the text container below About Us you can see that there's a very deformed SVG logo that says Petit Délice. If I open the image in a new tab it displays correctly, but inside the page it doesn't. I was thinking of using png substitution for browsers without svg support but from what I can see it wouldn't be of use in this case as the browser does support SVG.
Now, these two issues only occur in that specific browser and from what I've been able to check it happens in Android 4.2 and 4.4 on Samsung phones.
The site works perfectly fine on Chrome (both Android and iOS), Firefox and on Safari, but the customer has a Samsung phone and for some reason uses the s*itty browser it has by default which is causing me severe headaches.
You can check the site on this link
While creating a kml file, I'm encountering this annoying problem:
A placemark with icon hotspot set to the center is being placed just above the track path, instead of centered on it, when the view is being tilted.
This happens in Google Earth desktop for Windows [7.1.5.1557], while it is working correctly in Earth for Android, see here:
Screenshot Google Earth desktop Win (wrong hotspot when view is tilted):
Screenshot Google Earth Android (correct hotspot when view is tilted):
The iconStyle is defined as follows:
<IconStyle>
<Icon><href>wp_icon.png</href></Icon>
<scale>0.7</scale>
<hotSpot x="0.5" y="0.5" xunits="fraction " yunits="fraction" />
</IconStyle>
When I add the following, I can make it work like it should in Earth desktop, but then in Earth Android the icons are misplaced even more:
<heading>180</heading>
<gx:headingMode>screenUp</gx:headingMode>
I tried different combinations with heading values and
<gx:headingMode>screenUp</gx:headingMode>
<gx:headingMode>northUp</gx:headingMode>
<gx:headingMode>worldNorth</gx:headingMode>
but with no success to get the icons being displayed correctly in both versions of Earth (Win/Android).
Since I do not know a place to post bugs (https://code.google.com/p/earth-issues/ has been closed), I hope somebody from the Earth team will look into this, if nobody else comes up with a solution! Thank you.
The hotspot is correctly implemented with top-down view in mind, but there are a number of rendering bugs when you start tilting. As the tilt towards the horizon the icon starts to appear over above the point where it is placed, which is the behavior you are seeing. This particular bug was reported in the private google earth beta forum. The icon size also becomes smaller until they nearly completely appear at a 90 degree angle.
The Android app is newer than the Windows desktop app so apparently it compensates for the tilt when drawing the icons. It's a bug in the desktop client so any attempt to fix it in the desktop will most likely break it in the Android client as you've seen.
Surprised <gx:headingMode> does anything since that is not a documented Google Earth extension. This also does not appear in the most current XML schema. Careful about using undocumented extensions which may or may not work on a given client.
With earth-issues closed you can post problems to the Google Earth forum. For bugs you will be advised to submit feedback via the Help menu in Google Earth for the GE team to get them.
Is there any way to show my website exactly the same way how it works on PC, tablets or notebook? I've got full HD laptop and i'm using Chrome - everything works great. On my tablet 10" I also have full HD resolution and Chrome and my website shows like this one on notebook. When I try to to show it on my full HD Lumia 1520 it's crap. I don't use Chrome here so I can understand that some element can be broken by interpreter but it's so approximate that every element go on the others. It looks like 640x480.
Is it some way to force approximate?
If the site developed is not responsive according to the screen size it will not display the content present on it in well manner, you must use bootstrap in your website to make it responsive for all kind of screen resolutions. It may has problem in the CSS. So check the css you used.
Try to use meta tag called view-port. There are different situations and you may set up your website appearance with media queries for responsive results or manage it for being non-responsive but comfortable.
If you need second result - don't use any responsive frameworks or prevent them of using responsive techniques.
There are to much different situations so I can help only if you'll show me the code you have.
I know this type of question has been asked many times before but I haven't found an answer to my specific issue yet so I thought i would post.
It's really a bit of a quirk I guess rather than anything else but I have designed a responsive site that resizes nicely in a browser when you resize the window and works perfectly when you load it up in either portrait or landscape on a mobile. However when you load it in portrait and then turn the mobile into landscape some mobile browsers don't load up the correct styling for the new screen size - BUT IT DOESN'T HAPPEN LIKE THIS FOR ALL BROWSERS! So far I have tested it on an Android 4.0.4 version phone using the standard Android browser and it resizes correctly when switching orientations but then on the same phone using google chrome as the browser it applies different styling BUT if you refresh the page it then applies the correct styling.
So my question is how can I force the mobile browser to render the page correctly on orientation change without having to reload the page?
The site in question is www.the-baobab.co.uk and im using the viewport meta tag and setting it to width=device-width and an initial scale of 1 then calling media queries at certain max pixel widths to alter positioning and layout for various different screen sizes which can be seen in my stylesheet1.css here
For some reason i am not able to enter any text in inputtext in dhtml environment. The same is working fine in swf10 environment.
When i hover over the input text i observed that the cursor is not changing to selector. It looks as if the onmouseover event of inputtext is not getting fired.
Has anyone come across this kind of issue in openlaszlo dhtml envrironment?
I am using OpenLaszlo 4.9, Windows 7 and the browser is Firefox 15.0
I found a bug report in jira http://jira.openlaszlo.org/jira/browse/LPP-9934.
Please suggest any ideas to overcome this issue/
The problem you are seeing is probably connected to the way OpenLaszlo replicates the behavior of clicking through Sprites or visual elements in the Flash runtime for the DHTML/JavaScript runtime. Until recently browsers didn't support that kind of functionality directly. Therefore the OpenLaszlo team had to use a workaround, which is described in detail in this comment on LPP-5447.
Clickdivs exist to have independent control over clickable sprites,
without interference from regular divs. They are placed in a separate
copy of the regular lzdiv sprite hierarchy so we have more control.
This also provides a place to put focused inputtext divs so they are
in the foreground and clicking/dragging to edit works properly.
The clickdiv functionality seems to be broken from time to time with browser updates or due to regressions. In 2012 some improvements to the DHTML runtime click-through functionality were done, using newer browser features in Firefox (which now allows to click through div elements using the CSS style pointer-events). Since the clickdiv functionality is part of the LFC, fixing that functionality in your application is not advised.
You can test if the inputtext works by tabbing through the components until your inputtext element has the focus and start typing. If the text can be entered as expected, but you cannot click the component with your mouse to select it, it's definitely a clickdiv problem.
Update: Tested with OpenLaszlo 4.9.0 and various browsers
I've tested with OpenLaszlo 4.9.0, DHTML runtime and IE9, Firefox as well as Chrome, using the test case attached to LPP-9934: All browsers show that specific bug behavior. If the bug has not been filed, please file a JIRA bug.