That’s the first I’ve heard of the iOS not showing basic CSS the same way as a desktop WebKit browser. Odd.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
That makes sense if you read the CSS3 specs for background-size: cover
“cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area”
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Finding the cure for the newscycle issue (contain/cover) also helped me fix some weird behaviour with my background image (that is a layer fixed in position rather than a page background so that I could make it scale). It behaved a bit weirdly so I set it up as ‘cover’ as the default then set another breakpoint for 1600 pixels so that on most screens it’s set to contain. Over that, and it will scale to fill the page; Nice on my 27" iMac screen 
I also set different images on the breakpoints so that you don’t have to download a 1600 pixel image on the phone.
Another funny glitch that took a while to track down was that on the iPhone, when you drag up the main content over the background image, the background image scrolled up with the content rather than remaining fixed in position.
Turns out turning on “Background scrolls” fixed this! It seems counter intuitive, but hey, it works so I’m leaving it as it is!
Now the only issue is the old WIndows XP dilemna!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The weird scroll behavior is likely related to using a div as the “background”. Try applying your background image to the page as normal, and then use Page / Extended to make your background-size adjustments. You can lose a non-semantic element, and probably make the whole page perform better in these edge cases, too.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter, it’s a nice and helpful example at Image Scaling - Two Ways
Can you give us please a short description of the settings of the second example. I have read it somewhere these days but did forget.
Its for a responsive website.
The image shall scale proportional in all breakpoints, but also find a smooth scaling in between.
Thanks!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Now I know where I have seen it. It is in the „Getting started with responsive web design in Freeway“ video. Ha!
But in the contrary to the shown example, I use inflow items and the pass-through photo item is in a container, which collapses completely, when I turn the height to flexible. What I need because of the content below. It should do it partially in order to let it shrink at every breakpoint/page size to the size of the smaller photo content.
My settings:
Page action: auto clear fix (FW7) enabled + to all unfloated items
Photo: width 100% height flexible
Container: width 100% height: ???
I DO MISS SOMETHING I KNOW, BUT WHAT?
BTW: The Google Maps does not show up. Does someone have an idea why?
Had an error warning (-26840:473:518) that the file is defect.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Both the top and bottom boxes have the image set as a background image, using the background-sizing: cover (extended) attribute. This causes the browser to do the arithmetic to adjust the image to fit, where a normal background image would just crop the image in both axes as the surrounding page scaled.
The bottom image does not have a defined height. But the bottom-padding attribute is set to a percentage (40%). The way this works is the box will always be that percentage of the total width of the object. So if you make the box 200px wide, it will be 80px tall.
To make this kind of box in Freeway, you need to start with an inline HTML box. Click once on it, so its corner handles appear, then open the Item / Extended interface. Make sure the
segment is selected, and then click New, and in the sub-sub-dialog, enter the following name/value pairs:
| name | value |
|---|---|
| height | 0 |
| background-size | cover |
| padding-bottom | 40% |
In the normal Freeway interface, use the Inspector to add the image as the background for your HTML box. Don’t worry that it appears to be the wrong size/crop/whatever, it will look fine in a browser.
Finally, add the PrefixFree Action to your page. This will keep you from having to write all the variations on the background-size attribute that various older browsers require. You get to write the standard W3C attribute, and the Action will take care of the older browsers for you.
Walter
On Nov 15, 2014, at 1:12 PM, sonjanna email@hidden wrote:
Can you give us please a short description of the settings of the second example. I have read it somewhere these days but did forget.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This is a very interesting workaround, Walter. Thanks!
In my example the pass-through graphic scales without “background-size cover”, it is just the parent item that needs to be fixed in height in order to scale proportionally in all breakpoints/page width.
Using graphic items in inflow design in FW7 / responsive will be a common workaround in the future for all of us.
There MUST or SHOULD be a workaround in less than 1-2 easy steps. 
I will open a further thread in order to gather ideas.
Thanks again, Hanna
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I wrote a little JavaScript function that takes an image and converts it into a background image, which then can scale as needed. There’s an example here:
http://scripty.walterdavisstudio.com/responsive-gallery.html
If you view source on this page, you will see that the four images at the top are the only actual references to photos on the page, and they are coded as regular (foreground) images. But if you Control-click on one of them and inspect it in the Web Inspector, you will see that it is converted by the script into a reference to the clear GIF image, and the original image has become its background-image with the background-size attribute constraining it to fill the original box.
The fifth (big hero) image is created by the script when you click on any of the thumbnails. (That’s not the part I wanted you to see, but it’s important to note that over half of the code in that page is devoted to creating that behavior.)
Now it’s important to note that if you do this, your image will only ever be available at whatever (largest) size you insert it into the page. In my example, I am inserting way-too-large images into the tiny thumbnail elements. I can do this because I am hand-coding the example, and using a placeholder service for the images. In your Freeway layout, you would make the images as regular inline or positioned elements at the maximum size they would ever appear, and the script would allow them to become “shrinky” as the dimensions of the parent element change.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options