I've got the following situation, and I need some help...
Two divs, same size, same location, one on top of the other
Everything works as expected on desktop browsers
On the iphone/ipad a faint line appears around the border of the divs
This faint line is not always on all four borders. It changes depending on the location of the divs. It looks to be happening as a result of the two divs not lining up properly, but according to their style settings, they are of identical size and location.
You can see the results here: http://www.thoughtartistry.com
Any ideas?
I had a similar problem in a recent project where I had background image masks with different background color to colorize the resulting icons in mobile Safari. The problem was that when the page was scaled down by Safari, there was a line of the background color showing around the image, even though it should have been masked. I never found a way to prevent that leaking of the background color when the page is scaled down. It's clearly an error in mobile Safari's algorithms that recalculate the background and mask. I did find a workaround: I put an outline on the element with the same color as the background of the element's parent. The outline is outside the element and therefore masks the part bleeding out. If your element's parent has a pattern background that's drastic, this won't work that well, but if it's a solid color, it'll do just fine.
A negative margin is the only way I found to prevent this.
For example, if you have a faint horizontal gap between 2 divs, adding a top margin of -1px to the second div will make it overlap slightly and the gap will not reappear as the page is scaled.
Some situations (like image sprites or repeat patterns) may need a little more tweaking, but the general idea is the same. For a sprite, make sure there is no big color change within 1 pixel of the cropping border. The bleed is never more than 1 pixel, so a 1 pixel adjustment is enough.
The problem is not only with divs matching together, but also with image sprites.
I followed the advise in this thread of setting initial viewport scale to 1.0. The sub-pixel bug was gone, but then I tested my website on other devices, like Android, and realized a full size page is annoying, since users have to re-scale every time it's loaded. So I preferred to disable the scale and wait until Apple fixes it. Then one day I was thinking how to solve the problem with the margins of the page, and I came to this simple solution in CSS:
html {
min-width: 1024px;
}
Devices capable of this resolution, such as iPad in horizontal position, will set the document scale to 1.0. In my case this is enough solution, since I can show the page is working just right, and the sub-pixel bug is in Safari/iOS, which will be solved in the future hopefully.
It totally depends on one's situation, but in our case we use negative margins as proposed by this thread or a box shadow since outline only applies to all borders and ie. outline-bottom does not exist.
/*
* Prevent faint lines between elements.
* #link http://stackoverflow.com/questions/5832869
*/
box-shadow: 0 1px 0 red;
I also solved the iOS sub pixel gap issue (on a full screen site) by using overflow-x: hidden; to stop side ways scrolling & viewpoint scale to stop pitch zooming. I also had holder divs set at width: 101%; and all the elements/image divs inside set to float: left;. This means the sub pixel gaps are all on the left hand site but pushed out of view by the holder div set at 101% width.
Remove "clear:both" (if there is) from div below the gap.
I also had to solve this. If you are using Div's to define sections only then.
//background.css
.background-color {
background-color: blue;
}
.background-color div {
background-color: inherit;
}
I'd try playing with meta/viewport options, specifically setting initial scale to 1.0 and disabling user zooming.
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Related
I'm new to Unity and to game development in general.
I would like to make a text-based game.
I'm looking to reproduce the behavior of an instant messenger like messenger or whatapp.
I made the choice to use the Unity UI system for the pre-made components like the rect scroll.
But this choice led me to the following problem:
I have "bubbles" of dialogs, which must be able to grow in width as well as in height with the size of the text. Fig.1
I immediately tried to use VectorGraphics to import .svg with the idea to move runtime the points of my curves of Beziers.
But I did not find how to access these points and edit them runtime.
I then found the "Sprite shapes" but they are not part of the "UI",
so if I went with such a solution, I would have to reimplement
scroll, buttons etc...
I thought of cutting my speech bubble in 7 parts Fig.2 and scaling it according to the text size. But I have the feeling that this is very heavy for not much.
Finally I wonder if a hybrid solution would not be the best, use the
UI for scrolling, get transforms and inject them into Shape sprites
(outside the Canvas).
If it is possible to do 1. and then I would be very grateful for an example.
If not 2. 3. 4. seem feasible, I would like to have your opinion on the most relevant of the 3.
Thanks in advance.
There is a simpler and quite elegant solution to your problem that uses nothing but the sprite itself (or rather the design of the sprite).
Take a look at 9-slicing Sprites from the official unity documentation.
With the Sprite Editor you can create borders around the "core" of your speech bubble. Since these speech bubbles are usually colored in a single color and contain nothing else, the ImageType: Sliced would be the perfect solution for what you have in mind. I've created a small Example Sprite to explain in more detail how to approach this:
The sprite itself is 512 pixels wide and 512 pixels high. Each of the cubes missing from the edges is 8x8 pixels, so the top, bottom, and left borders are 3x8=24 pixels deep. The right side has an extra 16 pixels of space to represent a small "tail" on the bubble (bottom right corner). So, we have 4 borders: top=24, bottom=24, left=24 and right=40 pixels. After importing such a sprite, we just have to set its MeshType to FullRect, click Apply and set the 4 borders using the Sprite Editor (don't forget to Apply them too). The last thing to do is to use the sprite in an Image Component on the Canvas and set the ImageType of this Component to Sliced. Now you can scale/warp the Image as much as you like - the border will always keep its original size without deforming. And since your bubble has a solid "core", the Sliced option will stretch this core unnoticed.
Edit: When scaling the Image you must use its Width and Height instead of the (1,1,1)-based Scale, because the Scale might still distort your Image. Also, here is another screenshot showing the results in different sizes.
I am working on the credits for my mobile game and I have a license attribution thing at the end that is relatively long. On normal phone screen sizes it fits properly, but on notched phones, a big chunk of the end gets cut off and on tablets, there is a lot of empty space at the top and bottom. I had both the label and the content panel of the ScrollView for the credits set to the anchor preset which is anchored to the top of the parent but stretches horizontally and I tried changing it so that they stretch vertically too and that did nothing. I also tried moving the label's anchors to its own corners (but didn't do that with the content panel's anchors because that's not possible), but that also did nothing. I asked this on Unity Answers earlier this week and they haven't been very helpful. How do I make the text not get cut off or have a lot of extra space?
I eventually just clicked "Best Fit" on the text and now it fits properly. I was worried that it would look bad if it was a different size on different screens, but it doesn't seem to be a huge problem.
I made the container of a website have an opacity: 0.8 and then when I add a photo in this container, and actually anything, it also shows up as the same opacity. I'd like to keep images at 100% with no opacity. I am unsure how this actually would be fixed. I've tried changing the image z-index and opacity specifically but that didn't work. Any help would be great. See the sample below.
View Sample
I think you are better off making the background of these elements semi-transparent, rather than adding transparency to the entire container. This would not affect the photo and would make the text and buttons easier to read.
Please read the explanations e.g. on http://css-tricks.com/rgba-browser-support/ :
We have long had the opacity property, which is similar, but opacity
forces all decendant elements to also become transparent and there is
no way to fight it
So you have to use e.g.:
background: rgba(200, 54, 54, 0.5);
I have a grouped UITableView in my code and am trying to get the Single Line Etched style working, where it has the 1px white drop shadow at the bottom. Instead, I'm getting a sort of negative gray shadow at the top when I enable it. Neither programmatic nor IB implementation is yielding the 1 px drop shadow. Here's a link to a screenshot of what it looks like with the negative gray shadow:
TL;DR: I'd like the Single Line Etched style to give me a 1px white drop shadow instead of the 1px gray inner shadow it gives me now at the top.
Thank you!
It's been a while, but the problem here lay in the iPhone Simulator itself. As soon as I launched the app on an actual iOS device, everything worked fine and the white drop shadow was there. Regardless, thank you for the advice, BPratt–I'm sure that'll come into use for another situation.
I'm not sure that a grouped table repects the etched option, but a very quick work around is to create an image that has the exact look that you want and set the background image of the table cell to this image. Set the background image in the same method that you are setting up the rest of the data for each cell. Finally set the line style to "none" in IB.
I have never seen this issue before, its very strange. Just wondering if anyone else has come across this too.
I have added a sprite to my game, its supposed to be the top left corner of a box to put text on to. I want to make it scalable without loosing anything so i have it broken up into sections. In the image above the one on top is the image itself, and then the one on the bottom is the image when its being drawn in the iPhone simulator.
Any idea why the last column of pixels on the right are altered? I have not scaled the image at all.
I don't know about Cocos2D, but in general terms what you've done here is to draw the image at a position that isn't an exact multiple of one pixel.
Consequently even without scaling you have resampled the image across a grid that doesn't coincide with the original image data, causing all pixels to be a bit off. It's just the right-hand edge is the most obvious case, since the resampling leaves you with a partial transparency here. But look at eg the two rows of purple pixels in the border: they're not the same, because your vertical alignment is off as well, causing a small amount of colour from the grey border below it to bleed into the lower row of purple.
Ok I actually figured it out this time. Cocos2D adds a bit of antialiasing to CCTextures. To stop it from doing this you need to call this:
[[mySprite texture] setAliasTexParameters];
to turn it back on you call this:
[[mySprite texture] setAntiAliasTexParameters];